<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="560px"
    @open="handleDialogOpen()"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first"></el-tab-pane>
      <el-form
        :model="IllnessModel"
        :rules="formIlls"
        ref="illsForm"
        label-width="100px"
        label-position="right"
        size="small"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="疾病名称" prop="illName">
              <el-input
                v-model="IllnessModel.illName"
                ref="illName"
                autofocus
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="异常类别" prop="illExtype">
              <el-select v-model="IllnessModel.illExtype">
                <el-option
                  ref="illExtype"
                  v-for="item in illExtypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="是否职业病" prop="illIsdisease">
              <el-select v-model="IllnessModel.illIsdisease">
                <el-option
                  ref="illIsdisease"
                  v-for="item in illIsdiseases"
                  width="100px"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="适用性别" prop="illSex" placeholder="不限">
              <el-select v-model="IllnessModel.illSex">
                <el-option
                  ref="illSex"
                  v-for="item in illSexs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="就医期限" prop="illLine">
              <el-select v-model="IllnessModel.illLine">
                <el-option
                  ref="illLine"
                  v-for="item in illLines"
                  width="100px"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="就诊科室" prop="illClinic">
              <el-select v-model="IllnessModel.illClinic">
                <el-option
                  ref="illClinic"
                  v-for="item in illClinics"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="初步等级" prop="illGrade">
              <el-select v-model="IllnessModel.illGrade">
                <el-option
                  ref="illGrade"
                  v-for="item in illGrades"
                  width="100px"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="其他名称" prop="illPay">
          <el-input
            ref="illPay"
            type="textarea"
            resize="none"
            v-model="IllnessModel.illPay"
          ></el-input>
        </el-form-item>

        <el-form-item label="医学解释" prop="illExplain">
          <el-input
            ref="illExplain"
            type="textarea"
            resize="none"
            v-model="IllnessModel.illExplain"
          ></el-input>
        </el-form-item>

        <el-form-item label="常见原因" prop="illCause">
          <el-input
            ref="illCause"
            type="textarea"
            resize="none"
            v-model="IllnessModel.illCause"
          ></el-input>
        </el-form-item>

        <el-form-item label="建议" prop="illSuggest">
          <el-input
            ref="illSuggest"
            type="textarea"
            resize="none"
            v-model="IllnessModel.illSuggest"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="submitForm('illsForm')"
        >保 存</el-button
      >
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addIllness, illUpdate } from "@/api/Repository/illness";

export default {
  name: "role-edit",
  data() {
    return {
      activeName: "first",

      illExtypes: [
        { value: "系统自带", label: "系统自带" },
        { value: "自定义", label: "自定义" }
      ],

      illIsdiseases: [
        { value: "否", label: "否" },
        { value: "是", label: "是" },
        { value: "位置", label: "位置" }
      ],

      illSexs: [
        { value: "男", label: "男" },
        { value: "女", label: "女" }
      ],

      illLines: [
        { value: "立即", label: "立即" },
        { value: "一年内", label: "一年内" },
        { value: "半年内", label: "半年内" },
        { value: "三个月内", label: "三个月内" },
        { value: "一个月内", label: "一个月内" },
        { value: "一周", label: "一周" }
      ],

      illClinics: [
        { value: "内科", label: "内科" },
        { value: "外科", label: "外科" },
        { value: "妇产科", label: "" },
        { value: "儿科", label: "" },
        { value: "心血管内科", label: "" },
        { value: "消化科", label: "" },
        { value: "肾内科", label: "" },
        { value: "血液内科", label: "" },
        { value: "呼吸内科", label: "" },
        { value: "内分泌科", label: "" },
        { value: "风湿免疫科", label: "" },
        { value: "感染科", label: "" },
        { value: "神经内科", label: "" },
        { value: "肿瘤科", label: "" },
        { value: "普外科", label: "" },
        { value: "泌尿外科", label: "" },
        { value: "甲乳外科", label: "" },
        { value: "肛肠外科", label: "" },
        { value: "神经外科", label: "" },
        { value: "心胸外科", label: "" },
        { value: "血管外科", label: "" },
        { value: "肝胆外科", label: "" },
        { value: "理疗科", label: "" },
        { value: "骨科", label: "" },
        { value: "烧伤整形科", label: "" },
        { value: "耳鼻喉科", label: "" },
        { value: "眼科", label: "" },
        { value: "口腔科", label: "" },
        { value: "精神科", label: "" },
        { value: "皮肤科", label: "" },
        { value: "中医科", label: "" },
        { value: "其他", label: "" }
      ],

      illGrades: [
        { value: "一级", label: "一级" },
        { value: "二级", label: "二级" },
        { value: "三级", label: "三级" },
        { value: "四级", label: "四级" },
        { value: "五级", label: "五级" }
      ],

      IllnessModel: [
        {
          id: "",
          illName: "",
          illExtype: "",
          illIsdisease: "",
          illSex: "",
          illClinic: "",
          illGrade: "",
          illLine: "",
          illPay: "",
          illExplain: "",
          illCause: "",
          illSuggest: ""
        }
      ],

      //加载
      locked: false,

      dialogProps: {
        visible: false,
        action: "",
        title: ""
      },
      formIlls: {
        illName: [
          { required: true, message: "请输入疾病名称", trigger: "blur" },
          { min: 2, max: 32, message: "长度在 2 到 32 个字符", trigger: "blur" }
        ],
        illExtype: [
          { required: true, message: "请选择异常类别", trigger: "change" }
        ],

        illIsdisease: [
          { required: true, message: "请选择是否有职业病", trigger: "change" }
        ],
        illSex: [{ required: true, message: "请选择性别", trigger: "change" }],
        illLine: [
          { required: true, message: "请选择就医期限", trigger: "change" }
        ],
        illClinic: [
          { required: true, message: "请选择就诊科室", trigger: "change" }
        ],
        illGrade: [
          { required: true, message: "请选择初步等级", trigger: "change" }
        ]

        // illPay: [
        //   { required: true, message: "请输入其他名称", trigger: "blur" }
        // ],
        // illExplain: [
        //   { required: true, message: "请输入医学解释", trigger: "blur" }
        // ]
        // illCause: [
        //   { required: true, message: "请输入常见原因", trigger: "blur" }
        // ],
        // illSuggest: [{ required: true, message: "请输入建议", trigger: "blur" }]
      }
    };
  },
  methods: {
    //选项卡点击
    handleClick(tab, event) {
      console.log(tab, event);
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveIllness();
          } else {
            this.doUpdateIllness();
          }
        } else {
          return false;
        }
      });
    },
    doUpdateIllness() {
      illUpdate(this.IllnessModel)
        .then(response => {
          this.dialogProps.visible = false;
          if (response.data > 0) {
            this.$emit("save-finished");
            this.$message({
              message: "修改成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message.error("修改失败");
        });
    },
    doSaveIllness() {
      addIllness(this.IllnessModel)
        .then(response => {
          this.locked = false;
          this.dialogProps.visible = false;
          if (response.data > 0) {
            this.$emit("save-finished");
            this.$message({
              message: "添加成功",
              type: "success"
            });
          }
        })
        .catch(error => {
          this.$message.error("添加失败");
        });
    },

    handleDialogClose() {
      this.dialogProps.visible = false;
    },

    //输入框判断
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["illsForm"].clearValidate();
        this.$refs["illName"].focus();
      });
    },

    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditIllnessDialog", function(eModel) {
        this.IllnessModel = eModel;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "编辑";
        this.dialogProps.visible = true;
      });
      this.$on("openAddIllnessDialog", function() {
        this.dialogProps.action = "add";
        this.dialogProps.title = "新增";
        this.IllnessModel = {};
        this.dialogProps.visible = true;
      });
    });
  }
};
</script>

